<template>
    <div>
        <editor :init="init" v-model="init.value"></editor>
        <el-button @click="getContent">提交</el-button>
        <div v-html="init.value"></div>
    </div>
</template>

<script>

    // 引入tinymce主件
    // eslint-disable-next-line no-unused-vars
    import tinymce from '../../../public/tinymce'
    // 必须引入主体才能汉化和显示
    import 'tinymce/skins/ui/oxide/skin.css'
    import '../../../public/tinymce/themes/silver/theme'
    import '../../../public/tinymce/zh_CN'
    import '../../../public/tinymce/icons/default/icons'
    // 插件
    import 'tinymce/plugins/advlist'
    import 'tinymce/plugins/link'
    import 'tinymce/plugins/lists'
    import 'tinymce/plugins/textcolor'
    import 'tinymce/plugins/colorpicker'
    import 'tinymce/plugins/wordcount'
    import 'tinymce/plugins/contextmenu'
    // 引入tinymce-vue组件
    import Editor from '@tinymce/tinymce-vue'

    export default {
        name: 'Editor',
        // 注册tinymce组件
        components: {
            'editor': Editor
        },
        data() {
            return {
                // init: {
                //     // 组件
                //     plugins:
                //         ' lists image colorpicker textcolor wordcount contextmenu autoresize',
                //     // 工具栏
                //     toolbar:
                //         'bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent  | undo redo | link unlink image  | removeformat ',
                //     branding: false,
                //     min_height: 300,
                //     value: "<p class=\"paragraph\" style=\"margin: 0cm; margin-bottom: .0001pt; text-align: center; line-height: 130%;\" align=\"center\"><strong><span style=\"font-size: 20.0pt; line-height: 130%; color: black;\">林胜臣<span lang=\"EN-US\">2020</span>学习计划</span></strong></p>\n" +
                //         "<p class=\"paragraph\" style=\"margin: 0cm; margin-bottom: .0001pt; line-height: 130%;\"><span style=\"font-size: 14.0pt; line-height: 130%; font-family: 方正姚体; color: black;\">五月份学习<span lang=\"EN-US\">spring</span>，<span lang=\"EN-US\">mybatis</span>，</span></p>"
                //
                // },
                init: {
                    // 引入汉化组件
                    language_url: '../../public/tinymce/zh_CN.js',
                    // 设定语言为中文
                    language: 'zh_CN',
                    // 加入主题
                    skin_url: '../../public/tinymce/skins/ui/oxide',
                    // 注册功能组件
                    plugins:
                        'advlist lists link colorpicker textcolor wordcount',
                    // 注册工具栏
                    toolbar:
                        'bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent  | undo redo | link unlink image  | removeformat ',
                    branding: false,
                    height: 500,
                    value: "<p class=\"paragraph\" style=\"margin: 0cm; margin-bottom: .0001pt; text-align: center; line-height: 130%;\" align=\"center\"><strong><span style=\"font-size: 20.0pt; line-height: 130%; color: black;\">林胜臣<span lang=\"EN-US\">2020</span>学习计划</span></strong></p>\n" +
                        "<p class=\"paragraph\" style=\"margin: 0cm; margin-bottom: .0001pt; line-height: 130%;\"><span style=\"font-size: 14.0pt; line-height: 130%; font-family: 方正姚体; color: black;\">五月份学习<span lang=\"EN-US\">spring</span>，<span lang=\"EN-US\">mybatis</span>，</span></p>"

                }
            }
        },
        methods: {
            getContent() {
                // eslint-disable-next-line no-undef
                let content = tinyMCE.activeEditor.getContent()
                console.log(content)
            }
        }
    }
</script>


